<template>
  <!-- 健康上报界面 -->
  <div class="in-uploadTable">
    <el-page-header @back="$router.back()" :content="$route.query.title" />
    <!--  {{ $route.params }}
    {{ $route.query }} -->
    <!-- 基本信息 -->
    <div class="baseInfo">
      <el-form
        :model="baseInfo"
        :rules="rules"
        ref="baseInfo"
        label-width="100px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item
          v-for="(item, i) in baseInfo"
          :key="i"
          :label="item.label"
        >
          <!-- 输入框类型 -->
          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
          ></el-input>

          <!-- 选择框类型 -->
          <el-select
            v-model="item.value"
            placeholder="请选择"
            v-if="item.type === 'select'"
          >
            <template v-if="item.children">
              <el-option
                v-for="kid in item.children"
                :key="kid.label"
                :label="kid.label"
                :value="kid.value"
              ></el-option>
            </template>
          </el-select>

          <!-- 滑块类型 -->
          <el-switch
            v-if="item.type === 'switch'"
            v-model="item.value"
            active-color="#409eff"
            active-text="是"
            inactive-text="否"
          ></el-switch>
        </el-form-item>

        <!-- 如果 是否核酸为 true 展示以下模块 -->
        <template v-if="baseInfo.is_acid.value">
          <el-form-item
            v-for="(item, i) in baseInfo.is_acid.children"
            :key="i"
            :label="item.label"
          >
            <!-- 输入框类型 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="item.value"
            ></el-input>

            <!-- 上传图片类型 -->
            <el-upload
              v-if="item.type === 'uploadImg'"
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>

            <!-- 滑块类型 -->
            <el-switch
              v-if="item.type === 'switch'"
              v-model="item.value"
              active-color="#F56C6C"
              active-text="阳性"
              inactive-color="#409eff"
              inactive-text="阴性"
            ></el-switch>

            <!-- 时间类型 datetime-->
            <div v-if="item.type === 'datetime'">
              <el-date-picker
                v-model="item.value.day"
                align="right"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                style="margin-right: 5px;"
              ></el-date-picker>
              <el-time-picker
                v-model="item.value.time"
                :picker-options="{
                  selectableRange: '18:30:00 - 20:30:00',
                }"
                placeholder="任意时间点"
              ></el-time-picker>
            </div>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <el-button type="primary" class="el-icon-upload el-icon--right">
      提交
    </el-button>
    <!-- <br />
    <div v-for="(item, index) in init.date" :key="index">
      {{ item.Type }}————{{ item.Field }}
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseData: null,
      init: null,
      tableId: null,
      baseInfo: {
        name: {
          prop: 'name',
          label: '姓名',
          type: 'input',
          value: null,
        },
        sex: {
          prop: 'sex',
          label: '性别',
          type: 'select',
          value: null,
          children: [
            { label: '男', value: 1 },
            { label: '女', value: 0 },
          ],
        },
        age: {
          prop: 'age',
          label: '年龄',
          type: 'input',
          value: null,
        },
        address: {
          prop: 'address',
          label: '居住地',
          type: 'input',
          value: null,
        },
        is_acid: {
          prop: 'is_acid',
          label: '是否核酸',
          type: 'switch',
          value: false,
          children: [
            {
              prop: 'acid_date',
              label: '核酸日期',
              type: 'datetime',
              value: {
                day: null,
                time: null,
              },
            },
            {
              prop: 'acid_address',
              label: '核酸采集地',
              type: 'input',
              value: null,
            },
            {
              prop: 'acid_image',
              label: '上传图片',
              type: 'uploadImg',
              value: null,
            },
            {
              prop: 'acid_res',
              label: '核酸结果',
              type: 'switch',
              value: false,
            },
          ],
        },
      },
      rules: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
    }
  },
  methods: {
    async getTable() {
      const url = `/acid/getRes/?userId=${this.baseData.user}&status=${this.baseData.state}&tableId=${this.tableId}`
      await this.$ajax
        .post(url)
        .then((res) => {
          this.init = res.data
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  created() {
    this.baseData = this.$route.query
    this.tableId = this.$route.params.id
    this.getTable()
    console.log('baseData: ', this.baseData)
    console.log('tableId: ', this.tableId)
  },
}
</script>

<style lang="less" scoped>
.in-uploadTable {
  background-color: white;
  padding-bottom: 170px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  // 头标
  .el-page-header {
    margin-bottom: 20px;
    padding-top: 10px;
    padding-left: 10px;
    line-height: 28px;
    /deep/.el-page-header__left:hover {
      color: @color-blue;
    }
    /deep/.el-page-header__content {
      font-size: 1rem !important;
      color: #666;
      font-weight: 800;
      line-height: 26px;
    }
  }
  // 表格内容
  .baseInfo {
    margin: 0 auto;
    // background-color: pink;
    width: 550px;
    .el-form-item__label {
      font-size: 15px;
    }
  }
  // 提交按钮
  .el-icon-upload {
    display: block;
    margin: 0 auto;
    margin-top: 35px;
  }
}
</style>
